<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial-scale="1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        div[class ^="col-"]{
            border: 1px solid #000;
            /*margin-bottom: 5px;*/
            text-align: center;
        }
        div[class^='row']{
            margin-bottom: 5px;
        }
    </style>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
    <div class="container">
        <b>col-md-*</b>
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-8">col-md-8</div>
        </div>
        <b>col-xs-*</b>
        <div class="row">
            <div class="col-xs-4">col-xs-4</div>
            <div class="col-xs-8">col-xs-8</div>
        </div>
         <b>col-lg-*</b>
        <div class="row">
            <div class="col-lg-4">col-lg-4</div>
            <div class="col-lg-8">col-lg-8</div>
        </div>
<!--        使用.col-md-offset-*可以将列偏移到右侧。-->
<!--        这些class通过使用*选择器将所有列增加了列的左侧margin。-->
<!--        例如，.col-md-offset-*将.col-md-4向右移动了*个列的宽度。-->
         <b>列偏移:col-md-offset-*</b>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
<!--        为了使用内置的栅格将内容嵌套，-->
<!--        通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。-->
<!--        嵌套row所包含的列加起来应该等于12。-->
        <b>嵌套列:</b>
        <div class="row">
            <div class="col-md-9">
                col-md-9
                <div class="row show-grid">
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-8">col-md-8</div>
                </div>
        </div>

            <div class="col-md-12">
                col-md-12
                <div class="row show-grid">
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-8">col-md-8</div>
                </div>
            </div>
            </div>
<!--        col-md-push-* 将 main 元素向右推动 * 列，使用 .col-md-push-* 将 aside 元素向左拉动 * 列-->
            <b>列排序: .col-md-push-*和.col-md-pull-*</b>
            <div class="row">
                <div class="col-md-8 col-md-push-4">第一个div</div>
                <div class="col-md-4 col-md-pull-8">第二个div</div>
            </div>
        </div>
</body>
</html>